<template>
<Card>
  <Row :gutter="15">
    <i-col span="6">
      <Card>
        <p slot="title"><Icon type="ios-film-outline"></Icon>&nbsp;类型</p>
        <ul class="list">
          <li v-for="item in data5" :key="item.value" @click="getSfDescByDept(item)"><Icon type="document-text"></Icon> &nbsp;{{item.name}}</li>
        </ul>
      </Card>
    </i-col>
    <i-col span="18">
      <Card>
        <Row slot="title">
          <Col span="12">
            <p> <Icon type="ios-film-outline"></Icon>&nbsp;正文 ({{temp.name}})</p>
          </Col>
          <Col span="12"><Button style="float: right" size="small" type="primary" @click="updateSfDesc">保存</Button></Col>
        </Row>
        <kind-editor ref="editor" :config="editor.config"></kind-editor>
      </Card>
    </i-col>
  </Row>
</Card>
</template>

<script>
import { STATIS_HOST, SERVER_CPT_URL } from "@/api/config";
import KindEditor from "@/components/kindEditor";
export default {
  name: "TermOfService",
  data() {
    return {
      data5: [],
      treeData: [
        {
          title: "痕迹",
          expand: true,
          type: 0
        },
        {
          title: "法医",
          expand: true,
          type: 1
        },
        {
          title: "DNA",
          expand: true,
          type: 2
        },
        {
          title: "理化",
          expand: true,
          type: 3
        },
        {
          title: "文检",
          expand: true,
          type: 4
        },
        {
          title: "电子物证",
          expand: true,
          type: 5
        }
      ],
      editor: {
        config: {
          width: "100%",
          height: "450px",
          allowFileManager: false,
          langType: "zh-CN",
          items: [
            "undo",
            "redo",
            "preview",
            "print",
            "cut",
            "copy",
            "paste",
            "plainpaste",
            "wordpaste",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyfull",
            "insertorderedlist",
            "insertunorderedlist",
            "indent",
            "outdent",
            "subscript",
            "superscript",
            "clearhtml",
            "quickformat",
            "selectall",
            "formatblock",
            "fontname",
            "fontsize",
            "forecolor",
            "hilitecolor",
            "bold",
            "italic",
            "underline",
            "strikethrough",
            "lineheight",
            "removeformat",
            "table",
            "hr",
            "pagebreak",
            "anchor",
            "link",
            "unlink",
            // "uploadimg",
            "fullscreen"
          ],
          uploadJson: SERVER_CPT_URL + "/upload/PhotoUpload",
          staticHost: STATIS_HOST,
          filePostName: "file",
          allowFlashUpload: false,
          allowImageRemote: false,
          formatUploadUrl: false
        }
      },
      formItem: {},
      temp: {}
    };
  },
  components: {
    KindEditor
  },
  watch: {
    formItem: function(newVal, oldVal) {
      console.log(newVal)
      this.$refs["editor"].setContent(newVal["Content"])
    }
  },
  methods: {
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
            cursor: "pointer"
          },
          on: {
            click: () => {
              console.log(data);

              // this.$api.GetEngineerByDept({ DeptId: data.id }).then(res => {
              //   if (res.code == 0) {
              //     this.tmpdata = data;
              //     console.log(res);
              //     this.data6 = res.Data;
              //   }
              // });
            }
          }
        },
        [
          h("span", [
            h("Icon", {
              props: {
                type: "ios-paper-outline"
              },
              style: {
                marginRight: "8px"
              }
            }),
            h("span", data.title)
          ]),
          h("span", {
            style: {
              display: "inline-block",
              float: "right",
              marginRight: "32px"
            }
          })
        ]
      );
    },
    getFenju() {
      let array = [
        {
          name: "痕迹",
          value: 0,
        },
        {
          name: "法医",
          value: 1
        },
        {
          name: "DNA",
          value: 2
        },
        {
          name: "理化",
          value: 3
        },
        {
          name: "文检",
          value: 4
        },
        {
          name: "电子物证",
          value: 5
        }, 
        {
          name: "申明",
          value: 6
        },
        {
          name: "服务条款",
          value: 7
        }
      ]
      this.data5 = array
      this.temp = this.data5[0]
      // this.$api.GetFenju().then(res => {
      //   if (res.code == 0 ) {
      //     this.data5 = res.Data
      //     if (this.data5.length) {
      //       this.temp = this.data5[0]
      //       this.getSfDescByDept(this.data5[0])
      //     }
      //   }
      // })
    },
    updateSfDesc() {
      this.formItem["Content"] = this.$refs["editor"].getContent();
      this.$api.UpdateSfTerm(this.formItem).then(res => {
        if (res.code == 0) {
          this.$Message.success("修改成功！")
        }
      })
    },
    getSfDescByDept(dept) {
      this.temp = dept
      this.$api.GetSfTermByType(dept).then(res => {
        if (res.code == 0) {
          this.formItem = res.Data
        }
      })
    }
  },
  mounted () {
    this.getFenju()
  }
};
</script>

<style scoped>
.list {
  padding: 15px;
  padding-top: 5px;
}
.list>li {
  margin: 5px;
  margin-bottom: 15px;
  color: #000;
  font-size: 12px;
  cursor: pointer;
}
</style>
